import { Component, OnInit } from '@angular/core';
import { PickerController } from '@ionic/angular';

@Component({
  selector: 'app-apr-calculate',
  templateUrl: './apr-calculate.page.html',
  styleUrls: ['./apr-calculate.page.scss'],
})
export class AprCalculatePage implements OnInit {

  constructor(
    public pickerController:PickerController,
  ) { }

  ngOnInit() {
  }


  defaultColumnOptions = [
    [
      '6 Periods',
      '8 Periods',
      '12 Periods',
      '24 Periods',
      '36 Periods'
    ]
  ];

  getColumns(numColumns, numOptions, columnOptions) {
    let columns = [];
    for (let i = 0; i < numColumns; i++) {
      columns.push({
        name: `col-${i}`,
        options: this.getColumnOptions(i, numOptions, columnOptions)
      });
    }

    return columns;
  }

  getColumnOptions(columnIndex, numOptions, columnOptions) {
    let options = [];
    for (let i = 0; i < numOptions; i++) {
      options.push({
        text: columnOptions[columnIndex][i % numOptions],
        value: i
      })
    }

    return options;
  }
  periods = '12 Periods';
  async openPicker(event,numColumns = 1, numOptions = 5, columnOptions = this.defaultColumnOptions) {
    const picker = await this.pickerController.create({
      columns: this.getColumns(numColumns, numOptions, columnOptions),
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text:'Payment Schedule',
          cssClass:'customer_picker',
          handler:()=>{
            return false;
          }
        },
        {
          text: 'Ok',
          role: 'submit',
          handler: (value:any) => {
            console.info(value);
            // console.log(`Got Value ${value}`);
            this.periods = value['col-0'].text;
          }
        }
      ]
    });

    await picker.present();
  }
}
